﻿<!doctype html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>追加和移除样式</title>
        <style type="text/css">
            * { margin: 0px; padding: 0px; font-size: 14px; font-family: "微软雅黑"; line-height: 28px; }
            .title { font-size: 14px; color: #03F; text-align: center; }
            .text { padding: 10px; }
            .content { background-color: #FFFF00; }
            .border { border: 1px dashed #333; }
        </style>
    </head>
    <body>
        <h2 class="title">jQuery操作CSS</h2>
        <p class="text">
            css()设置或返回样式属性<br> addClass()增加一个或多个类
            <br> removeClass()移除一个或多个类
        </p>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(document).ready(function() {
                $("h2").mouseover(function() {
                    $("p").addClass("content border");
                });
//              $("h2").mouseout(function() {
//                  $("p").removeClass("text content");
//              });
            });
        </script>
    </body>
</html>